<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        font {
            font-size: 18px;
            font-family: 楷书;
            color: #080808;
        }
        #div1 {
            color: black;
            font-size: 16px;
            font-weight: bold;
            margin: 0px 10px;
        }
        #div2 {
            color: #DD2727;
            font-size: 14px;
            margin: 0px 10px;
        }
        button {
            display: inline-block;
            margin: 0px 10px;
            width: 180px;
            height: 40px;
            cursor: pointer;
        }
        #buyButton {
            border: 1px solid #C40000;
            background-color: #FFEDED;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: #C40000;
            font-family: arial;
        }
        #addCartButton {
            border: 1px solid #C40000;
            background-color: #C40000;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: white;
            font-family: arial;
        }
        a {
            color: #666666;
            text-decoration: none
        }
        a:hover {
            color: #2DA77A;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function modifyCount(thisNode) {
            // 输入的数据只能是1 ~ 库存数量,只要不是这个范围内的,归1
            var userInput = thisNode.value; // 用户输入的数据
            // 当这个数据不合法的时候归1
            if (parseInt(userInput) != userInput) {
                thisNode.value = 1
            }
            // 第一个数字是1-9中的一个.第二个数字可以有也可以没有.
            var regExp = /^[1-9][0-9]*$/
            var ok = regExp.test(userInput)
            if (!ok) { //不符合正则
                thisNode.value = 1;
            } else {
                // 走到这里一定是数字,但是数字必须是1~库存
                if (thisNode.value > ${product.nums}) {
                    thisNode.value = 1;
                }
            }
        }
        $(function () {
            $("#buyButton").click(function () {
                var num = ${product.nums}
                if (num == 0) {
                    alert("该物品库存不足，请联系物品发布者增加物品！")
                } else {
                    var nums = $("#nums").val().trim()
                    window.location = "http://localhost:8080/myWeb/order/pay?nums=" + nums
                        + "&id=" + ${product.id}
                }
            })
            $("#addCartButton").click(function () {
                var num = ${product.nums}
                if (num == 0) {
                    alert("该物品库存不足，请联系物品发布者增加物品！")
                } else {
                    $.ajax({
                        url: "order/addCart",
                        data: {
                            "userName": "${product.userName}",
                            "productId": ${product.id},
                            "state": "待付款",
                            "nums":  $("#nums").val().trim(),
                            "goodsPrice": ${product.price},
                            "customerName": "${sessionScope.userName}"
                        },
                        type: "post",
                        dataType: "text",
                        success: function (resp) {
                            alert(resp)
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<div align="center">
    <img src="static/images/7.jpg" width="1200px" height="117">
</div>
<div style="display: flex">
    <div style="width: 400px; height: 270px; float: left;padding-top: 20px; margin-top: 50px;
      background:url('static/images/priceBackground.png'); margin-left: 200px">
        <div style="text-align: center; margin-bottom: 20px;">
            <font style="color: saddlebrown; font-size: 32px; font-weight: bold">卖家信息</font>
        </div>
        <div style="text-align: center">
            <font>姓名：${student.studentName}</font>
        </div>
        <div style="text-align: center">
            <font>性别：${student.sex}</font>
        </div>
        <div style="text-align: center">
            <font>联系电话：${student.phone}</font>
        </div>
    </div>
    <div style="margin-top: 50px; margin-left: 50px; width: 536px">
        <div id="div1">${product.content}</div>
        <div id="div2">物品类别：${product.category}</div>
        <div style="background-color: #2DA77A;color: white;text-align: center;
           line-height: 40px; margin-top: 10px;">
            <span style="font-size: 18px; font-weight: bold;font-family: Arial;">聚划算</span>
            <span>此物品参加平台活动聚划算，
                <span style="color: #FFC057;font-weight: bold;">1天24小时</span>
                后开始
            </span>
        </div>
        <div style="height: 102px; background:url('static/images/priceBackground.png');
       padding: 10px;color: #666666;">
            <div style="margin-top: 10px">
                <span style="color: #777777;display: inline-block; width: 68px;">原价</span>
                <span style="font-family: Arial;font-size: 16px;">￥</span>
                <span style="font-family: Arial;font-size: 16px;
               color: #333333;text-decoration: line-through;">
                    ${product.oldPrice}
                </span>
            </div>
            <div style="margin-top: 0px; margin-top: 10px">
            <span style="color: #777777;display: inline-block;
                 width: 68px;position: relative;left: 0px;
                 top: -10px;">优惠价格</span>
                <span style="font-family: Arial;font-size: 24px;
                  color: #C40000;">￥</span>
                <span style="color: #c40000; font-family: Arial;
              font-size: 30px;font-weight: bold;">${product.price}
                </span>
            </div>
        </div>
        <div style="margin-top: 10px">
            <span style="color: #9D9D9D">数量</span>
            <span style="color: #9D9D9D">
                <input type="text" id="nums" style="width: 32px; height: 22px;text-align: center" value="1" onkeyup="modifyCount(this)">件
            </span>
            <span style="color: #9D9D9D; margin-left: 20px">库存：${product.nums}</span>
        </div>
        <div style="margin-top: 10px; font-size: 12px">
            <span style="color: #999999;">服务承诺</span>
            <span style="color: #999999;">
                <a href="javascript:void(0)">正品保证</a>
                <a href="javascript:void(0)">极速退款</a>
                <a href="javascript:void(0)">赠上名校宝典</a>
                <a href="javascript:void(0)">七天无理由退货</a>
            </span>
        </div>
        <div style="margin: 20px auto;text-align: center">
            <button id="buyButton">立即购买</button>
            <button id="addCartButton"><span>加入购物车</span></button>
        </div>
    </div>
</div>
</body>
</html>
